<template>
  <div class="page-mark-panel">
    <input type="text" class="aimind-hidden-input" />
    <input type="password" class="aimind-hidden-input" />
    <mark-header />
    <mark-left />
    <mark-middle />
    <mark-right />
    <mark-drag />
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import MarkHeader from './Header';
import MarkLeft from './Left';
import MarkMiddle from './Middle';
import MarkRight from './Right';
import MarkDrag from './Drag';
import { routePathData } from '../../assets/scripts/common'
export default {
  components: {
    MarkHeader,
    MarkLeft,
    MarkMiddle,
    MarkRight,
    MarkDrag
  },
  watch: {
    $route (to, from) {
      if (to.path === routePathData.markVisual && !to.query.id) {
        // 组件销毁
        this.resetComponents([]);
        this.resetLayout([])
      }
    }
  },
  data () {
    return {};
  },
  methods: {
    ...mapMutations(['setMenuShow', 'resetComponents', 'resetLayout'])
  },
  created () {
    var that = this;
    // 绑定全局点击事件，点击区域，隐藏右击面板
    document.addEventListener('click', function (e) {
      if (that.menuShow) {
        that.setMenuShow(false);
      }
    });
  }
};
</script>
